<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
<title>jQuery+html5触屏手机移动端焦点图特效 - 【科e互联】</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style-type: none; }
a, img { border: 0; }
body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; }
/* gallery */
.gallery { width: 214px; margin: 0px auto; }
.gallery li { display: block; float: left; height: 100px; margin-bottom: 6px; margin-right: 6px; width: 100px; }
.gallery li a { height: 100px; width: 100px; }
.gallery li a img { max-width: 100px; }
</style>
<link rel="stylesheet" type="text/css" href="css/lightGallery.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lightGallery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#auto-loop").lightGallery({
		loop:true,
		auto:true,
		pause:4000
	});
});
</script>
</head>
<body class="keBody">
<h1 class="keTitle">jQuery+html5触屏手机移动端焦点图特效</h1>
<div class="kePublic">
<!--效果html开始-->
<ul id="auto-loop" class="gallery">
  <li data-src="img/zheng.jpg">
    <div id="zheng_title">单证名称</div> 
    <div id="zheng"><img src="img/zheng.jpg" width="850" height="1148" /></div>  
  </li>
  <li data-src="img/zheng.jpg">
    <div id="zheng_title">单证名称</div> 
    <div id="zheng"><img src="img/zheng.jpg" width="850" height="1148" /></div>    
  </li>
  <li data-src="img/zheng.jpg">
    <div id="zheng_title">单证名称</div> 
    <div id="zheng"><img src="img/zheng.jpg" width="850" height="1148" /></div>    
  </li>
  <li data-src="img/zheng.jpg">
    <div id="zheng_title">单证名称</div> 
    <div id="zheng"><img src="img/zheng.jpg" width="850" height="1148" /></div>    
  </li>
</ul>
<!--效果html结束-->
<div class="clear"></div>
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> | 
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> | 
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> | 
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> | 
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> | 
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> | 
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
</body>
</html>